<template>
  <div class="game-content">
    <com-header></com-header>
    <com-pro class="por-posi"></com-pro>
    <div class="centerbox">
      <div class="comparebox">
        <div class="title">
          <span>{{$t('ry')}}</span>
          <span>{{$t('zq')}}</span>
        </div>
        <div class="ball">
          <div v-for="(item,index) in ball" :key="index+'a'" @click="toggleImage(index)">
            <img v-if="item.src" :src="item.src" class="ballsize2 ballposi" />
          </div>
        </div>
      </div>
    </div>
    <div class="ballbox">
      <div v-for="(item, index) in imgData" :key="index" @click="selectImage(index)">
        <img class="ballsize" :src="item.src" />
      </div>
      <div>
        <img class="ballsize" src="@/assets/images/payOrder/jx.png" @click="MachineSelection()" />
      </div>
    </div>
    <div class="centerbox">
      <com-money class="money-posi"></com-money>
      <com-btn class="btn-posi"></com-btn>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ComMoney from "./Com/ComMoney.vue";
import ComHeader from "./Com/ComHeader.vue";
import ComPro from "./Com/ComPro.vue";
import ComBtn from "./Com/ComBtn.vue";
export default {
  name: "GameSeven",
  //游戏把选三
  props: {},
  components: {
    ComMoney,
    ComHeader,
    ComPro,
    ComBtn
  },
  data() {
    return {
      imgData: [
        { src: require("@/assets/images/payOrder/a1.png"), code: 1 },
        { src: require("@/assets/images/payOrder/a2.png"), code: 2 },
        { src: require("@/assets/images/payOrder/a3.png"), code: 3 },
        { src: require("@/assets/images/payOrder/a4.png"), code: 4 },
        { src: require("@/assets/images/payOrder/a5.png"), code: 5 },
        { src: require("@/assets/images/payOrder/a6.png"), code: 6 },
        { src: require("@/assets/images/payOrder/a7.png"), code: 7 },
        { src: require("@/assets/images/payOrder/a8.png"), code: 8 },
        { src: require("@/assets/images/payOrder/a9.png"), code: 9 },
        { src: require("@/assets/images/payOrder/a10.png"), code: 10 }
      ],
      ball: [
        {
          item: 1
        },
        {
          item: 2
        },
        {
          item: 3
        }
      ],
      selectedImagesCount: 0, // 初始化为 0，用于追踪被选中的图片数量
      selected: "even",
      selectedsize: "big"
    };
  },
  computed: {
    ...mapState("handlegame", ["isInit"])
  },
  watch: {
    isInit: {
      handler(newVal) {
        if (newVal) {
          this.init();
          this.$store.commit("handlegame/INTE_PAGE_STATE", false);
        }
        // 执行你想要的操作
      },
      deep: true // 如果isInit是对象或数组，使用deep选项进行深度监听
    }
  },

  created() {},
  methods: {
    init() {
      (this.ball = [
        {
          item: 1
        },
        {
          item: 2
        },
        {
          item: 3
        }
      ]),
        (this.selected = "even"),
        (this.selectedsize = "big"),
        (this.selectedImagesCount = 0); // 初始化为 0，用于追踪被选中的图片数量
    },
    toggleImage(index) {
      this.$store.dispatch("handlegame/resetGame83");
      const clickedItem = this.ball[index]; // 获取点击的球的信息
      if (clickedItem.src) {
        // 如果点击的球有图片
        clickedItem.src = null; // 清除点击的球的图片
        this.selectedImagesCount--; // 每次删除图片后减数
        for (let i = index + 1; i < this.ball.length; i++) {
          // 向后移动后续图片
          if (this.ball[i].src) {
            // 如果后续位置有图片
            this.ball[i - 1].src = this.ball[i].src; // 将后续图片向前移动一个位置
            this.ball[i].src = null; // 清空当前位置的图片
            this.ball[i].code = null; // 清空当前位置的图片
          }
        }
      }
    },
    selectImage(index) {
      const selectedImage = this.imgData[index]; // 获取选中的图片信息
      const existingBallIndex = this.ball.findIndex(
        item => item.src === selectedImage.src
      ); // 检查是否已存在相同的球
      if (existingBallIndex === -1) {
        // 如果不存在相同的球
        const emptySlotIndex = this.ball.findIndex(item => !item.src); // 找到第一个空位
        if (emptySlotIndex !== -1) {
          // 如果有空位
          this.$set(this.ball, emptySlotIndex, {
            src: selectedImage.src,
            code: selectedImage.code
          }); // 将选中的图片放置到第一个空位
          this.selectedImagesCount++; // 每次选中图片后增加计数
          if (this.selectedImagesCount === 3) {
            const codesArray = this.ball.map(item => item.code); // 提取 ball 中所有 code 属性到新数组
            const codesString = codesArray.join(","); // 将数组中的 code 属性以逗号连接成字符串
            this.$store.dispatch("handlegame/setSevenGameNuber", codesString);
          }
        }
      }
    },
    //生成随机数
    MachineSelection() {
      this.init();
      while (this.selectedImagesCount < 3) {
        const randomIndex = Math.floor(Math.random() * this.imgData.length); // 生成随机索引
        const selectedImage = this.imgData[randomIndex]; // 选择随机的图片
        const existingBallIndex = this.ball.findIndex(
          item => item.src === selectedImage.src
        );
        if (existingBallIndex === -1) {
          const emptySlotIndex = this.ball.findIndex(item => !item.src);
          if (emptySlotIndex !== -1) {
            this.$set(this.ball, emptySlotIndex, {
              src: selectedImage.src,
              code: selectedImage.code
            });
            this.selectedImagesCount++;
          }
        }
      }
      const codesArray = this.ball.map(item => item.code);
      const codesString = codesArray.join(",");
      this.$store.dispatch("handlegame/setSevenGameNuber", codesString);
    },
    checkSelected(value) {
      this.selected = value;
    },
    checkSizeEd(value) {
      this.selectedsize = value;
    }
  }
};
</script>
<style lang="less" scoped>
.game-content {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.por-posi {
  margin-top: 20px;
}
.comparebox {
  width: 171px;
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  .title {
    margin-right: 10px;
    width: 100px;
    height: 42px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    color: #ffffff;
  }
  .ball {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      width: 30px;
      height: 30px;
      border-radius: 19px;
      border: 1px solid #ffffff;
      position: relative;
      img {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
.active {
  background: #ededed;
  font-weight: 500;
  color: #000000;
}
.isacitve {
  background: #404040;
  font-weight: 500;
  color: #ffffff;
}
.ball-select::-webkit-scrollbar {
  display: none; /* Webkit 兼容性：隐藏滚动条 */
}
.ballsize {
  width: 25px;
  height: 25px;
  margin-right: 3px;
}
.ballsize2 {
  width: 30px;
  height: 30px;
}
.ballbox {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}
.centerbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .money-posi {
    margin-top: 14px;
  }
  .btn-posi {
    margin-top: 19px;
  }
}
</style>
    